<template>
	<view class="balance-detials u-flex">
		<u-navbar class="navbar" :border-bottom="false" title="红包明细" :title-size="36" :title-bold="true"
			:title-color="textColor" :background="{backgroundColor: bgColor}" >
		</u-navbar>
		<view class="u-p-t-20 u-flex content" >
			<view class="u-p-l-30 u-p-r-30 " style="width: 100%;">
				<view class="stat-container u-p-40">
					<view class="stat-header  u-flex u-row-between">
						<view class="u-flex">
							<!-- <svg class="svg-icon" aria-hidden="true">
							  <use xlink:href="#icon-hongbao"></use>
							</svg> -->
							<text class="u-font-32 u-m-l-14">红包统计</text>
						</view>
						<view class="u-flex" @click="isShowHeader =!isShowHeader">
							<text class="u-font-28 u-m-r-10" v-if="isShowHeader">收起</text>
							<view class="u-font-28 u-m-r-10" v-else>
								当前结余金额
								<text style="color: #ff551a;">{{ownerSummary.currentBalance}}</text>
								元
							</view>
							<u-icon name="arrow-down" :class="['rotate-icon',{'rotate-active':isShowHeader}]" size="28"></u-icon>
						</view>
					</view>
					<view class="stat-content" :style="{'height':isShowHeader?'272rpx':0}">
						<view class="stat-item u-m-t-40 u-m-b-40">
							<view class="stat-item-count">{{ownerSummary.totalSend}}</view>
							<view class="stat-item-text">总发放金额（元）</view>
						</view>
						<view class="u-flex u-row-between">
							<view class="stat-item u-flex-1">
								<view class="stat-item-count" style="color: #0B9001;">{{ownerSummary.totalReceive}}</view>
								<view class="stat-item-text">总回收金额（元）</view>
							</view>
							<view class="stat-item u-flex-1">
								<view class="stat-item-count" style="color: #ff551a;">{{ownerSummary.currentBalance}}</view>
								<view class="stat-item-text">当前结余金额（元）</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detials-container u-p-t-40">
				<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
					<view class="u-p-l-35 u-p-r-35 " slot="top" >
						<view class="" >
							<u-search :searchIconFlag="true" v-model="searchText" 
							input-align="center" placeholder="店铺名称" height="70" :border-color="'#FFBB1A'" 
							:bg-color="'#fff'" 	:show-action="false" @change="reloadFn" @search="reloadFn"></u-search>
						</view>
						<view class="u-flex filter-top u-m-t-30 ">
							<view  :style="{'color':SortBy === ''?'#ff551a':'#333','width':'100rpx'}" @click="defaultSort()">默认</view>
							<view  class="u-flex u-flex-1 u-col-center u-row-center"  @click="balanceSortFn()">
								<view class="u-m-r-4" :style="{'color':(SortBy === 0||SortBy == 1)?'#ff551a':'#333'}">当前红包余额</view>
								<view class="u-flex" style="flex-direction: column;position: relative;">
									<view class="iconfont icon-arrow-up-filled filter-up-icon" 
									:style="{'color':SortBy === 0?'#ff551a':'#333','bottom':SortBy === 0?'-20rpx':'-13rpx'}"
									v-show="SortBy != 1"></view>
									<view class="iconfont icon-arrow-up-filled filter-down-icon"
									 :style="{'color':SortBy == 1?'#ff551a':'#333','top':SortBy == 1?'-20rpx':'-13rpx'}"
									 v-show="SortBy !== 0"></view>
								</view>
							</view>
							<view  class="u-flex u-flex-1 u-row-center"  @click="timeSortFn()">
								<view class="u-m-r-4" :style="{'color':(SortBy == 2||SortBy == 3)?'#ff551a':'#333'}">最后使用时间</view>
								<view class="u-flex" style="flex-direction: column;position: relative;">
									<view class="iconfont icon-arrow-up-filled filter-up-icon"
									:style="{'color':SortBy == 2?'#ff551a':'#333','bottom':SortBy == 2?'-20rpx':'-13rpx'}"
									v-show="SortBy != 3"></view>
									<view class="iconfont icon-arrow-up-filled filter-down-icon"
									:style="{'color':SortBy == 3?'#ff551a':'#333','top':SortBy == 3?'-20rpx':'-13rpx'}"
									v-show="SortBy != 2"></view>
								</view>
							</view>
						</view>
						<view class="u-flex u-m-t-20 u-m-b-20">
							<view class="u-flex-1 interval-box u-m-r-24" @click="balancePop = true">
								<view class="u-flex u-row-center" v-if="startPrice ===''&&endPrice===''">
									<text class="u-font-28" style="color:#666;">余额区间</text>
									<text class="iconfont icon-arrow-up-filled " style="transform: rotate(180deg);"></text>
								</view>
								<view v-else-if="startPrice ===''&&endPrice!==''"  class="u-font-22 u-text-center u-line-1">
									小于{{endPrice}}
								</view>
								<view v-else-if="startPrice !==''&&endPrice===''"  class="u-font-22 u-text-center u-line-1">
									大于{{startPrice}}
								</view>
								<view v-else class="u-font-22 u-text-center u-line-1">
									{{startPrice}}至{{endPrice}}
								</view>
							</view>
							<view class="u-flex-1 interval-box" @click="dateShow = true">
								<view class="u-flex u-row-center" v-if="startDate==''">
									<text class="u-font-28" style="color:#666;">时间区间</text>
									<view class="iconfont icon-arrow-up-filled " style="transform: rotate(180deg);"></view>
								</view>
								<view v-else class="u-font-22 u-line-1" style="overflow: hidden;">
									{{startDate+'至'+endDate}}
								</view>
							</view>
						</view>
						<view class="table-header u-flex u-row-between u-m-b-10">
							<view class="u-text-center u-flex-1">企业信息</view>
							<view style="width: 280rpx;" class="u-p-t-10 u-p-b-10">
								<view class="u-text-center">当前红包余额 </view>
								<view class="u-text-center">及最后使用时间</view>
							</view>
						</view>
					</view>
					<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
					<view class="u-p-l-35 u-p-r-35" v-for="(item,index) in dataList" :key="index" @click="goDetailsFn(item)">
						<view class="u-flex u-row-between u-p-t-30 u-p-b-30" style="border-bottom: 1rpx solid #E5E5E5;">
							<view class="u-flex">
								<image :src="item.logoUrl||defaultLogo" mode="" style="width: 60rpx;height: 60rpx;border-radius: 50%;"></image>
								<view class="u-m-l-20 u-font-30 u-line-1" style="font-weight: 500;width: 320rpx;">{{item.shopName}}</view>
							</view>
							<view class="u-flex " >
								<view style="width: 200rpx;">
									<view class="u-text-center u-font-30" style="font-weight: 500;">￥{{item.balance}}</view>
									<view class="u-text-center u-font-22" style="color: #999;">{{ $u.timeFormat(item.lastModifiedTime,'yyyy-mm-dd h:MM') }}</view>
								</view>
								<u-icon name="arrow-right" class="u-m-l-10"></u-icon>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
		<u-popup v-model="balancePop" @close="reloadFn" :closeable="true" mode="bottom" >
			<view class="box-padding" style="height: 400rpx;background-color: #FFFFFF;">
				<h3 class="u-text-center u-m-b-20">余额区间</h3>
				<view class="price-container u-flex u-row-between u-p-35">
					<view class="price-dad">
						<u-input type="number" placeholder="最低价格"  v-model="startPrice" :clearable="false" input-align="center" placeholder-style="color:#999;font-size:28rpx;text-align:center;"  ></u-input>
					</view>
					<view style="margin: 0 30rpx;">-</view>
					<view class="price-dad">
						<u-input type="number" placeholder="最高价格" v-model="endPrice" :clearable="false" input-align="center" placeholder-style="color:#999;font-size:28rpx;text-align:center;" ></u-input>
					</view>
				</view>
				<view class="u-p-35">
					<view class="btn-group u-flex">
						<view class="filter-reset u-text-center" @click="resetPriceFn">重置</view>
						<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-calendar v-model="dateShow" isFilterArea range-color="#ff551a" safe-area-inset-bottom mode="range" active-bg-color="#ffbb1a" range-bg-color="rgba(255,187,26,0.4)" @change="dateChoosefn"></u-calendar>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				isShowHeader:false,
				dataList:[],
				searchText:"",
				SortBy:'',
				dateShow:false,
				startDate:'',
				endDate:'',
				balancePop:false,
				startPrice:'',
				endPrice:'',
				ownerSummary:{},
			}
		},
		created(){
			this.getAccountBooks();
		},
		methods:{
			goDetailsFn(item){
				this.$mRouter.push({route:"/pages/owners/balanceDetails/salesTransfer?data="+JSON.stringify(item)})
			},
			// 选择时间区间
			dateChoosefn(val){
				console.log(val);
				this.startDate = val?val.startDate:'';
				this.endDate = val?val.endDate:'';
				this.reloadFn();
			},
			// 默认排序
			defaultSort(){
				this.SortBy = '';
				this.reloadFn()
			},
			// 按账户余额大小升序或降序
			balanceSortFn(){
				if(this.SortBy !== 0&&this.SortBy != 1){
					this.SortBy = 0;
				}else{
					this.SortBy = this.SortBy===0?1:0;
				}
				this.reloadFn();
			},
			// 点击重置按钮
			resetPriceFn(){
				this.startPrice = '';
				this.endPrice = '';
			},
			// 点击确定价格筛选弹窗按钮
			submitBtnClickFn(){
				let minPrice = Number(this.startPrice);
				let maxPrice = Number(this.endPrice);
				if((minPrice>maxPrice)&&(this.startPrice!==''&&this.endPrice!=='')){
					this.$u.toast('价格筛选，最小价格不能大于最大价格');
					return false;
				}else{
					this.balancePop = false;
				}
			},
			// 最后操作时间排序
			timeSortFn(){
				if(this.SortBy != 2&&this.SortBy != 3){
					this.SortBy = 2;
				}else{
					this.SortBy = this.SortBy==2?3:2;
				}
				this.reloadFn();
			},
			// 重置企业列表
			reloadFn(){
				this.$refs.paging.reload();
			},
			// 获取品牌商红包统计信息
			async getAccountBooks(){
				const res = await this.$newHttp.get('api/v1.3/AccountBook/BrandOwnerGetAccountSummary');
				if(res.code === 200){
					this.ownerSummary = res.data;
				}else{
					this.$u.toast('获取红包统计失败，错误信息:'+res.erroMessage);
				}
			},
			// 获取红包流向列表
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					AccountBookTypes:0,
				}
				if(this.searchText!==''){
					params.Name = this.searchText;
				}
				if(this.SortBy !==''){
					params.AccountsSortBy = this.SortBy;
				}
				if(this.startPrice!==''){
					params.MinBalance = Number(this.startPrice);
				}
				if(this.endPrice!==''){
					params.MaxBalance = Number(this.endPrice);
				}
				 if(this.startDate !== ''&&this.startDate){
					params.BeginTime = this.startDate;
				}
				if(this.endDate !== ''&&this.endDate){
					params.EndTime = this.endDate;
				}
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				const res = await this.$newHttp.get('api/v1.3/AccountBook/BrandOwnerGetAccountBooksPage', { params: params } );
				uni.hideLoading({
					title: '加载中...'
				})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
		}
	}
</script>
 
<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	.balance-detials{
		flex-direction: column;
		height: 100%;
		.content{
			flex-direction: column;
			flex:1;
			width: 100%;
		}
		.stat-container{
			width: 100%;
			background: linear-gradient(0deg, #FFBB1A, #FFD87A);
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			.stat-header{
				.svg-icon{
					width: 42rpx;
					height: 54rpx;
				}
				.rotate-icon{
					transition: transform .3s;
				}
				.rotate-active{
					transform: rotateZ(180deg);
				}
			}
			.stat-content{
				// height: 272rpx;
				overflow: hidden;
				transition: height .3s;
				.stat-item{
					.stat-item-count{
						font-weight: bold;
						font-size: 48rpx
					}
					.stat-item-text{
						font-size: 24rpx;
					}
				}
			}
		}
		.detials-container{
			flex:1;
			width: 100%;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			box-shadow: 0px 0px 18px 2px rgba(8,1,3,0.1);
			.filter-top{
				.filter-up-icon{
					font-size: 34rpx;
					color: #666;
					position: absolute;
					bottom: -13rpx;
					left: 0rpx;
				}
				.filter-down-icon{
					transform: rotate(180deg);
					font-size: 34rpx;
					color: #666;
					position: absolute;
					left: 0rpx;
					top: -16rpx;
				}
			}
			.table-header{
				background-color: #FAFAFA;
				border-radius: 10rpx;
				font-size: 24rpx;
				color:#999;
			}
			.interval-box{
				background-color: #FAFAFA;
				border-radius: 34rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
		.price-container{
			.price-dad{
				background-color: #fff;
				border: 1px solid #E7E7E7;
				border-radius: 35px;
				box-sizing: border-box;
				padding: 0 20rpx;
			}
		}
		.btn-group{
			border-radius: 50rpx;
			overflow: hidden;
			.filter-reset{
				box-sizing: border-box;
				padding: 24rpx 0;
				flex:1;
				background-color: #DDDDDD;
			}
			.filter-confirm{
				box-sizing: border-box;
				padding: 24rpx 0;
				flex:1;
				background-color: #FFBB1A;
			}
		}
	}
	
</style>